<template>
  <div ref="EcharRef" id="echarRefMap" style="width: 100%; height: 100%"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { debounce } from "./mixins/debounce";
import  {registerMap} from "@/assets/json/echartsJson";

export default defineComponent({
  setup(props: any) {
    // echart节点
    const charts = ref<HTMLElement | null>(null);
    onMounted(() => {
      const myChart = echarts.init(
        document.getElementById("echarRefMap") as HTMLElement
      );
      echarts.registerMap("world", registerMap);
      myChart.setOption({
        tooltip: {
          padding: [6, 10],
          extraCssText: "white-space:pre-wrap",
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          // triggerOn: "click", // 触发条件
          enterable: true, //允许鼠标进入提示悬浮层中
          showContent: true,
          className: "areaTool",
          textStyle: {
            align: "left",
            lineHeight: 28,
          },
        },
        layoutCenter: ["50%", "50%"], //位置
        visualMap: {
          orient: "vertical",
          text: ["高", "低"],
          textStyle: {
            color: "#1A71FF",
            fontSize: 12,
          },
          min: 100,
          max: 100000,
          type: "piecewise",
          left: 20,
          bottom: 20,
          itemWidth: 16,
          itemHeight: 16,
          realtime: false,
          calculable: true,
          inverse: false,
          inRange: {
            // color: ['#062c83', '#02359e', '#0566d0','#0078fc','#3a7ae2','#3f89da','#72b4fd']
            color: [
              "#72b4fd",
              "#3f89da",
              "#3a7ae2",
              "#0078fc",
              "#0566d0",
              "#02359e",
              "#062c83",
            ],
          },
        },
        series: [
          {
            name: "来源分布",
            type: "map",
            zoom: 1.2,
            // center: ['50%', '50%'],
            itemStyle: {
              normal: {
                borderWidth: 1, //边际线大小
                borderColor: "#5bc1c9", //边界线颜色
                areaColor: "#72b4fd", //默认区域颜色
              },
            },
            roam: true,
            mapType: "world",
            showLegendSymbol: true,
            emphasis: {
              label: {
                color: "#fff",
              },
              itemStyle: {
                areaColor: "#0034FB",
              },
            },
            data: [
              { name: "美国", value: 441442 },
              { name: "泰国", value: 343087 },
              { name: "印度", value: 341373 },
              { name: "乌克兰", value: 260240 },
              { name: "尼泊尔", value: 255741 },
              { name: "马来西亚", value: 220607 },
              { name: "韩国", value: 198434 },
              { name: "西班牙", value: 141900 },
              { name: "哈萨克斯坦", value: 139803 },
              { name: "俄罗斯", value: 132130 },
              { name: "德国", value: 121507 },
              { name: "日本", value: 112553 },
              { name: "希腊", value: 75137 },
              { name: "阿根廷", value: 50246 },
              { name: "台湾", value: 46138 },
              { name: "香港", value: 44720 },
              { name: "哥伦比亚", value: 43848 },
              { name: "越南", value: 34081 },
              { name: "英国", value: 33098 },
              { name: "中国", value: 31076 },
              { name: "葡萄牙", value: 28833 },
              { name: "蒙古国", value: 25766 },
              { name: "缅甸", value: 19622 },
              { name: "加拿大", value: 16751 },
              { name: "法国", value: 13745 },
              { name: "阿拉伯", value: 12086 },
              { name: "菲律宾", value: 6567 },
              { name: "巴西", value: 6430 },
              { name: "新加坡", value: 5839 },
              { name: "墨西哥", value: 4142 },
              { name: "阿富汗", value: 3771 },
              { name: "澳大利亚", value: 2839 },
              { name: "朝鲜", value: 2497 },
              { name: "印尼", value: 2454 },
              { name: "新西兰", value: 1960 },
              { name: "卡塔尔", value: 1920 },
              { name: "土耳其", value: 1917 },
              { name: "老挝", value: 1666 },
              { name: "柬埔寨", value: 1405 },
              { name: "伊朗", value: 1150 },
              { name: "比利时", value: 979 },
              { name: "科威特", value: 869 },
              { name: "立陶宛", value: 754 },
              { name: "瑞典", value: 748 },
              { name: "美国·", value: 394 },
              { name: "智利", value: 201 },
              { name: "瑞士", value: 125 },
              { name: "荷兰", value: 41 },
              { name: "梵蒂冈", value: 17 },
            ],
          },
        ],
      });
      window.addEventListener(
        "resize",
        debounce(() => {
          myChart.resize();
        })
      );
    });
    return {
      charts,
    };
  },
});
</script>
